<template>
    <div class="container">
        <Head></Head>

        <!--        <van-nav-bar @click-left="onClickRight">-->
        <!--            <template #left>-->
        <!--                <van-icon name="arrow-left" size="23" color="#fff" />-->
        <!--            </template>-->
        <!--        </van-nav-bar>-->
        <!--        <div class="user1">-->
        <!--            <img class="user_img" src="@/assets/user.png" />-->
        <!--        </div>-->

        <h1 class="head-h1">{{ $t('shop.menu.me') }}</h1>
        <div class="pool">
            <div class="pool_txt">
                <div class="p1">
                    <div class="p1_1">{{$t('m.pool')}}(RousePro)</div>
                    <div class="p1_2">{{ rouse }}</div>

                </div>
                <div class="p2">
                    <div class="p2_1" > {{$t('m.circulation')}}(WuDao)</div>
                    <div class="p2_2" style="color: #EE822F;">{{ wu }}</div>

                </div>
            </div>
        </div>
        <PriceChart></PriceChart>
        <div class="account">
            <div class="top-content1">
                <div class="account1">
                    <div class="account-top-1">
                        <div class="account-text">{{$t('m.invest')}}</div>
                        <div class="top-bnb"><span class="top-num">{{invest}}</span> BNB</div>
                    </div>
                </div>
                <div class="account1">
                    <div class="account-top-2">
                        <div class="account-text">{{$t('m.profit')}}</div>
                        <div class="top-bnb"><span class="top-num">{{profit}}</span> BNB</div>
                    </div>
                </div>
            </div>
            <div class="bottom-content">
                <div class="account1">
                    <div class="account-top-1">
                        <div class="account-text">{{$t('m.release')}}</div>
                        <div class="top-bnb"><span class="top-num">{{amount}}</span> WuDao</div>
                    </div>
                </div>
                <div class="account1">
                    <div class="account-top-2">
                        <div class="account-text">{{$t('m.cash')}}</div>
                        <div class="top-bnb"><span class="top-num">{{ pedding_wu }}</span> WuDao</div>
                    </div>
                </div>
            </div>
            <div class="vertical-lines">
                <div class="vertical-line"></div>
                <div class="vertical-line"></div>
            </div>
            <div class="horizontal-line"></div>
        </div>


        <div class="account-big">
            <div class="account-text2">{{$t('m.max')}}</div>
            <div class="big-num"><span>{{ maxMint }}</span> RousePro</div>
        </div>

        <div class="account-team">
            <div class="account-text2">{{$t('m.team_invest')}}</div>
            <div class="big-num"><span >{{team_invest}}</span> BNB </div>
        </div>


        <div class="acc" style="margin-bottom: 20px;">{{$t('m.nft')}}</div>
        <div class="account-card" style="margin-top: 30px;">
            <!--            <div class="acc" style="margin-bottom: 20px;">{{$t('m.nft')}}</div>-->

            <div class="cards-van">
                <img class="cards-van-image" src="@/assets/xf-1.png" v-if="card1"  />
                <img class="cards-van-image gray" src="@/assets/xf-1.png" v-else  />
            </div>
            <div class="cards-gen">
                <img class="cards-van-image" src="@/assets/cs-1.png" v-if="card2"  />
                <img class="cards-van-image gray" src="@/assets/cs-1.png" v-else  />
            </div>
        </div>


        <div class="account-group">
            <div class="acc2">{{$t('m.myinvite')}}</div>

            <div class="account-group-1">
                <div class="account_1">
                    <div>{{$t('m.invite_num')}}</div>
                    <div><span  class="group-num">{{invite_num}}</span></div>
                </div>

            </div>
            <div class="account-group-2">
                <div>{{$t('m.tjz')}}</div>
                <div><span  class="group-num">{{formatAddr(address)}}{{str2}}</span></div>
            </div>

            <div class="account-group-3" >
                <div>{{$t('m.ztuser')}}</div>
                <div class="group-look-with-arrow" @click="toggleInvite">
                    <span class="group-look">{{$t('m.view')}}</span>
                </div>
            </div>

            <div v-if="showInvite" class="group-list">
                <div class="group-list-one">
                    <span class="list-text">{{ str3_1 + list_n + str3_3 }}</span>
                    <span class="list-price">{{ version_1.toFixed(1) }} BNB</span>
                    <span class="list-num">{{ list_num1.toFixed(6) }}</span>
                </div>
                <div class="liner-1"></div>
                <div class="group-list-two">
                    <div class="list-two-1">
                        <span class="list-text">{{ str3_1 + list_n + str3_3 }}</span>
                        <span class="list-price">{{ version_1.toFixed(1) }} BNB</span>
                        <span class="list-num">{{ list_num1.toFixed(6) }}</span>
                    </div>
                    <div class="liner"></div>
                    <div class="list-two-2">
                        <span class="list-text">{{ str3_2 + list_n + str3_2 }}</span>
                        <span class="list-price">{{ version_2.toFixed(1) }} BNB</span>
                        <span class="list-num">{{ list_num1.toFixed(6) }}</span>
                    </div>
                </div>
                <div class="liner-2"></div>
                <div class="group-list-three">
                    <span class="list-text">{{ str3_1 + list_n + str3_3 }}</span>
                    <span class="list-price">{{ version_1.toFixed(1) }} BNB</span>
                    <span class="list-num">{{ list_num1.toFixed(6) }}</span>
                </div>
            </div>



        </div>
        <div class="recordlist" v-if="show">
            <!--  <record-list addressr="0x289B390e9901Be273e11e9De8a427cBd898b4624"></record-list>-->
            <record-list :addressr="$store.state.address"></record-list>
        </div>

        <!--        <div class="bnav"></div>-->

<!--                 <menu-bar></menu-bar>-->

    </div>
</template>

<script>
/*  import MenuBar from "components/content/menubar/MenuBar";*/
import detectEthereumProvider from '@metamask/detect-provider'
import Web3 from 'web3'
import rouseAbi from '@/abi_rouse'
import wuAbi from '@/abi_wu'
import RecordList from "../components/RecordList";
import Head from '@/components/head.vue'
import PriceChart from '@/components/PriceChart.vue';
// import MenuBar from "@/src/components/content/menubar/MenuBar.vue";
export default {
    name: 'UserC',
    components:{
        // MenuBar,
        RecordList,
        Head,
        PriceChart,
        /* MenuBar*/
    },
    data() {
        return {
            show:false,
            maxMint:1.23,
            invite_num:0,
            invest:1.23,
            address:"0x0000",
            team_invest:1.23,
            pedding_wu:1.23,
            release_time:'...',
            wu_price:'...',
            card1:0,
            card2:0,
            rouse:3436.67,
            wu:3436.67,
            profit:1.23,
            amount:1.23,
            record:[],

            str2:'000000',
            showInvite: false,
            //自建group-list数据
            str3_1:'0x456',
            str3_2:'0x423',
            str3_3:'Daf4A',
            version_1:1.0,
            version_2:0.7,
            list_n:'*****',
            list_num1:146.643000,
            list_num2:157.643000
        };
    },
    computed:{
        formatAddr() {
            return addr => {
                let str1 = addr.substring(0, 6)
                let str2 = addr.substring(36)
                return str1 + "*****" + str2
            }
        }
    },
    created() {

        this.getInvite()

    },
    methods: {

        // showInvite(){
        //     this.show=!this.show
        // },
        toggleInvite() {
            this.showInvite = !this.showInvite;
        },

        async getInvite() {
            try{
                let dayBlock=600
                const provider = detectEthereumProvider();

                let web3;
                if (provider) {
                    console.log('Ethereum successfully detected!')
                    web3=new Web3(window.ethereum) ;
                } else {
                    // if the provider is not detected, detectEthereumProvider resolves to null
                    console.error('Please install MetaMask!')
                }


                var contractId = this.$store.state.rouse_contract;
                var tokenContract = new web3.eth.Contract(rouseAbi, contractId);

                //  this.$store.state.address = '0x289B390e9901Be273e11e9De8a427cBd898b4624';
                let user =await tokenContract.methods.topUser(this.$store.state.address).call();
                this.address=user


                let invite_num =await tokenContract.methods.userShareLevel(this.$store.state.address).call();
                this.invite_num=invite_num

                let invest =await tokenContract.methods.userInvestBNBAmount(this.$store.state.address).call();
                this.invest=web3.utils.fromWei(invest, 'ether')

                let team_invest =await tokenContract.methods.teamTotalInvestValue(this.$store.state.address).call();
                this.team_invest=parseFloat(web3.utils.fromWei(team_invest, 'ether')).toFixed(2)

                let aPool=await tokenContract.methods.aPool().call();
                let bPool=await tokenContract.methods.bPool().call();
                this.rouse=parseFloat(web3.utils.fromWei(aPool, 'ether')).toFixed(2)
                this.wu=parseFloat(web3.utils.fromWei(bPool, 'ether')).toFixed(2)
                if(bPool<=0){
                    this.wu_price="---"
                }else{
                    this.wu_price=parseFloat(aPool/bPool).toFixed(2)
                }

                let card =await tokenContract.methods.getCard(this.$store.state.address).call();
                console.log(card.big)
                if(card.small){
                    this.card1=1
                }
                if(card.big){
                    this.card2=1
                }

                let profit =await tokenContract.methods.userClaimRewardBNBValue(this.$store.state.address).call();

                let tprofile= parseFloat(web3.utils.fromWei(profit, 'ether'))

                if(tprofile > 0){
                    this.profit=tprofile.toFixed(5);
                }else{
                    this.profit=tprofile.toFixed(2);
                }

                //  this.profit=parseFloat(web3.utils.fromWei(profit, 'ether')).toFixed(5)

                var wuContract = new web3.eth.Contract(wuAbi, this.$store.state.wu_contract);
                let info =await wuContract.methods.geInfoWu(this.$store.state.address).call();
                console.log(info)
                this.pedding_wu=parseFloat(web3.utils.fromWei(info.wait, 'ether')-web3.utils.fromWei(info.recive, 'ether')).toFixed(2)
                this.release_time=info.time
                let number=await web3.eth.getBlockNumber();
                console.log(number)
                let day=parseInt((number-info.time)/dayBlock);
                console.log(day)
                //   let amount=parseFloat((this.pedding_wu*25/1000)*day).toFixed(2);
                let amount=parseFloat((this.pedding_wu*0.025*0.8)*day).toFixed(2);
                console.log(amount)
                //let recive=parseFloat(web3.utils.fromWei(info.recive, 'ether')).toFixed(2);
                // console.log(amount,this.pedding_wu,recive)
                // if(amount>(this.pedding_wu-recive)){
                //     amount=this.pedding_wu;
                // }
                this.amount=parseFloat(amount).toFixed(2);

                let incomeTime=await tokenContract.methods.incomeTime().call();
                let rouseAward=await tokenContract.methods.getRouseAward(this.$store.state.address).call();
                console.log(web3.utils.fromWei(rouseAward.a, 'ether'))
                console.log(web3.utils.fromWei(rouseAward.b, 'ether'))

                let month = (number - incomeTime) / (dayBlock * 30)
                if (month > 5) {
                    month = 10;
                }else{
                    month=parseInt(month)*2;
                }
                console.log(month)
                this.maxMint = parseFloat(((web3.utils.fromWei(rouseAward.a, 'ether')-web3.utils.fromWei(rouseAward.b, 'ether')) * month) / 10).toFixed(2);
            }catch(e){
                console.log(e.message)
            }

        },
        onClickRight() {
            console.log("router");
            this.$router.push('/nav')
        },
    }

}
</script>

<style scoped>
.bnav {
    margin: auto;
    max-width: 500px;
    padding: 0px 25px;
    z-index: 10;
    /* background-color: #DDFDFA; */
    background: #000;
    height:66px;
}

.head-h1{
    font-size: 25px; /* 你可以根据需要调整字体大小 */
    font-weight: bold; /* 你可以根据需要调整字体粗细 */
    background: linear-gradient(to bottom, #D57123, #F4BF43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    letter-spacing: 15px;
}

.recordlist {
    margin:3px 20px 3px 20px;
}

/*
.pool{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.pool_img{
    width: 200px;
}
.pool_txt{
    display: flex;
    flex-direction: column;
    margin-right: 80px;
    font-size: 13px;
}
 */

.container{
    /* 我的 */

    position: relative;
//width: 420px;
//height: 1411px;
    background: #0B0C0D;
}

/*.pool_txt{
    position: absolute;
    display: flex;
    top:0.2%;
    left:12%;
    border: 1px solid white;
}*/

.p1, .p2 {
    position: absolute;
    width: 174px;
    height: 77px;
    left: 50%;
    background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.25) 0%, rgba(52, 25, 0, 0.1) 78.06%);
    border-radius: 20px;
    overflow: hidden;
}

.p1 {
    top: 110px;
}

.p2 {
    top: 184px;
}

.p1_1{
    /* 铸造池(RousePro) */

    position: absolute;
    width: 102px;
    height: 20px;
    left: 36px;
    top: 10px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 167% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #CCCCCC;


}

.p2_1{
    /* 流通量(WuDao) */

    position: absolute;
    width: 102px;
    height: 20px;
    left: 36px;
    top: 10px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 167% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #CCCCCC;


}

.p2_2{
    /* 3436.67 */

    position: absolute;
    width: 104px;
    height: 20px;
    left: calc(50% - 104px/2);
    top: 39px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 20px;
    line-height: 20px;
    /* identical to box height, or 100% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #FB8417;


}

.p1_2{
    /* 3436.67 */

    position: absolute;
    width: 104px;
    height: 20px;
    left: 35px;
    top: 39px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 20px;
    line-height: 20px;
    /* identical to box height, or 100% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #FB8417;


}

.account {
    box-sizing: border-box;
    position: absolute;
    width: 350px;
    height: 160px;
    left: calc(50% - 350px / 2);
    top: 492px;
    background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.35) 0%, rgba(31, 17, 4, 0.1) 78.06%);
    border-radius: 18px;
    border: 1px solid rgba(251, 132, 23, 0.3); /* 将边框透明度设置为 10% */
}

.top-content1 {
    position: absolute;
    width: 350px;
    height: 80px;
    left: 0px;
    top: 0px;
    text-align: center;
}

.bottom-content {
    position: absolute;
    width: 350px;
    height: 80px;
    left: 0px;
    top: 80px;
}

.account-top-1 {
    position: absolute;
    width: 175px;
    height: 80px;
    left: 175px;
    top: 0px;
}

.account-top-2 {
    position: absolute;
    width: 175px;
    height: 80px;
    left: 0px;
    top: 0px;
}

.account-text {
    position: absolute;
    width: 102px;
    height: 20px;
    left: 36px;
    top: 15px;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #CCCCCC;
}

.vertical-lines {
    position: absolute;
    left: calc(50% - 1px); /* Adjust to center the lines */
    top: 0;
    height: 100%;
    width: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Adjust the space between lines */
}

.vertical-line {
    width: 1px;
    height: 80px; /* Adjust to match the height of the content */
    background: linear-gradient(to bottom, rgba(251, 132, 23, 0), rgba(251, 132, 23, 0.2), rgba(251, 132, 23, 0));
}

.horizontal-line {
    position: absolute;
    width: 350px;
    height: 1px;
    left: 0;
    top: 80px;
    background: linear-gradient(to right, rgba(251, 132, 23, 0), rgba(251, 132, 23, 0.2), rgba(251, 132, 23, 0));
}

.account-big{
    /* Frame 48095783 */

    box-sizing: border-box;

    position: absolute;
    width: 350px;
    height: 38px;
    left: calc(50% - 350px/2);
    top: 669px;
    border: 1px solid #FB8417;
    background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.25) 0%, rgba(27, 15, 4, 0.1) 78.06%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border-radius: 20px;

}

.account-text2{
    /* 最大可铸造WuDao */

    position: absolute;
    width: 169px;
    height: 20px;
    left: -8px;
    top: 9px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #CCCCCC;
}

.big-num{
    /* 0.00 RousePro */

    position: absolute;
    width: 100px;
    height: 20px;
    left: 232px;
    top: 9px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    text-align: right;
    letter-spacing: -0.02em;

    color: #FB8417;


}

.account-team {
    /* Frame 48095784 */

    box-sizing: border-box;

    position: absolute;
    width: 350px;
    height: 38px;
    left: calc(50% - 350px/2);
    top: 724px;
    border: 1px solid #FB8417;

    background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.25) 0%, rgba(27, 15, 4, 0.1) 78.06%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border-radius: 20px;

}

.account-card{
    position: absolute;
//border: 1px solid #FB8417;
    width:90%;
    left:5%;
    top:790px;
    height:250.57px;
    display: flex;
    justify-content: space-around;
}

.acc{
    /* 我的卡牌 */

    position: absolute;
    width: 301px;
    height: 20px;
    left: calc(50% - 301px/2 + 0.5px);
    top: 779px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height, or 125% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #FFFFFF;


}

.top-num{
    /* 1.23 */

    position: absolute;
    width: 104px;
    height: 20px;
    left: calc(50% - 176px/2);
    top: -2px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 20px;
    line-height: 20px;
    /* identical to box height, or 100% */
    text-align: center;
    letter-spacing: -0.02em;

    color: #FB8417;
}

.top-bnb{
    /* BNB */

    position: absolute;
    width: 28px;
    height: 20px;
    left: 95px;
    top: 47px;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 167% */
    text-align: right;
    letter-spacing: -0.02em;

    color: #CCCCCC;


}

.cards-van-image{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 这个属性可以帮助图片按比例填满容器 */


}

.cards-van{
    /* cards / VANGUARD */

    box-sizing: border-box;

//position: absolute;
    width: 160px;
    height: 250.57px;

    background: #000000;
    border-radius: 9.0566px;
}

.cards-gen{
    /* cards / GENESIS */

    box-sizing: border-box;

//position: absolute;
    width: 160px;
    height: 250.57px;
    background: #000000;
    border-radius: 9.0566px;

}

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;
}

.xq1{
    padding: 5px 0px;
    background-color: #201f1f;
    border-radius: 5px;
    margin-bottom: 1px;
    margin:5px;

}

.van-hairline--bottom::after{
    border-bottom-width:0;
}

.container {
    background-color: #000;
    /* padding: 0 30px; */

    padding-bottom: 100px;
    min-height: 1500px;
    letter-spacing: 0.00938em;
    font-size: 15px;
    color:#B3B3B3;


}

.account-group{
    /* 技术优势 */

    position: absolute;
    width:83%;
    height: 124px;
    left: 8.5%;
    top: 1089px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(180deg, #150A00 0%, #0B0C0D 100%);
    border-radius: 16px;
    border: 1px solid #FFC000;

}

.acc2{
    /* 我的邀请 */
    position: absolute;
    left: 4.94%;
    right: 7.56%;
    top: 6.45%;
    margin-bottom: 6.45%;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 16px;
    line-height: 20px;
    /* identical to box height, or 125% */
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.group-num{
    /* 0 */

    position: absolute;
    left: 9.3%;
    right: 1%;
    top: 25.81%;
    bottom: 58.06%;

    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 14px;
    line-height: 10px;
    /* identical to box height, or 143% */
    text-align: right;
    letter-spacing: -0.02em;
    color: #FB8417;
}

.account-group-1{
    /* 有效人数 */

    position: absolute;
    left: 4.94%;
    right: 4%;
    top: 27%;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(251, 132, 23, 0.2); /* 将边框透明度设置为 10% */
    color: #CCCCCC;
    padding-bottom: 5px;
//border: 1px solid #ccc;
}

.account-group-2{
    /* 推荐者 */
    position: absolute;
    left: 4.94%;
    right: 4%;
    top: 54%;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.02em;
    border-bottom: 1px solid rgba(251, 132, 23, 0.2); /* 将边框透明度设置为 10% */
    color: #CCCCCC;
    padding-bottom: 5px;
//border: 1px solid #ccc;

}

.account-group-3{
    /* 直推用户 */

    position: absolute;
    left: 4.94%;
    right: 4%;
    top: 79%;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.02em;
    color: #CCCCCC;
//border: 1px solid #ccc;

}

.group-look{
    /* 查看 */
    position: absolute;
    left: 4.94%;
    right: 1%;
    top: 1%;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 398;
    font-size: 12px;
    line-height: 20px;
    /* identical to box height, or 167% */
    text-align: right;
    letter-spacing: -0.02em;
//text-decoration-line: underline;
    text-decoration: none;
    color: #CCCCCC;
}

.group-look-with-arrow {
    display: flex;
    align-items: center;
}

.group-look::after {
//content: 'ⴷ'; /* 使用 ⴷ 符号作为箭头 */
    content: 'ⴸ'; /* 使用 ⴸ 符号作为箭头 */
    margin-left: 5px; /* 调整箭头与文本之间的距离 */
    font-size: 12px; /* 调整箭头大小 */
//font-weight: bold;

    color: #FB8417; /* 箭头颜色 */
}

.group-list {
    /* Rectangle 28 */
    box-sizing: border-box;
    position: absolute;
    width: 345px;
    height: 155px;
    left: calc(50% - 344px/2);
    top: 115px;
    background: linear-gradient(134.63deg, rgba(27, 15, 5, 0.2) 39.91%, rgba(251, 132, 23, 0.5) 116.93%);
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    /* border-radius: 16px; */
}

.group-list-one {
    position: absolute;
    top: 5px;
    left: -30px;
    border-bottom: 1px solid white; /* 添加底边框 */
    padding-bottom: 5px; /* 确保内容不与边框重叠 */
}

.group-list-two {
    position: absolute;
    top: 16px; /* 调整位置以避免与上一个元素重叠 */
    left: -30px;
    border-bottom: 1px solid white; /* 添加底边框 */
    padding-bottom: 5px; /* 确保内容不与边框重叠 */
}

.group-list-three {
    position: absolute;
    top: 100px;
    left: -30px;
    width: 100%; /* 让宽度撑满父元素 */
}

.liner {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50px;
    top: 62px;
    border-left: 2.5px solid #CCCCCC; /* 左边框 */
    border-bottom: 2.5px solid #CCCCCC; /* 底边框 */
    border-radius: 0 0 0 12px; /* 只在左下角使用圆角 */
    box-sizing: border-box; /* 确保边框不会影响到盒子的大小 */
}

.liner-1 {
    /* Line 27 */
    position: absolute;
    width: 94%;
    height: 1px;
//margin: 0 auto;
    left: 3%;
    top: 53px;
    background: #CCCCCC;
}

.liner-2 {
    /* Line 27 */
    position: absolute;
    width: 94%;
    height: 1px;
    left: 3%;
    top: 114px;
    background: #CCCCCC;
}

.list-two-1 {
    position: absolute;
    top: 25px;
}

.list-two-2 {
    position: absolute;
    top: 50px;
}

.list-two-2 > .list-text {
    left: 70px;
}

.list-text {
    /* 0x456*****Daf4A */
    position: absolute;
    width: 142px;
    height: 20px;
    left: 41px;
    top: 20px;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.02em;
    color: #CCCCCC;
}

.list-price {
    /* Group 1707480064 */
    position: absolute;
    width: 61px;
    height: 20px;
    left: 208px;
    top: 20px;
    background-color: #FB8417;
    color: white;
    border-radius: 5px;
    padding: 0.5px 1px;
}

.list-num {
    /* 146.643000 */
    position: absolute;
    width: 76px;
    height: 20px;
    left: 285px;
    top: 20px;
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 443;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    letter-spacing: -0.02em;
    color: #CCCCCC;
}



.van-nav-bar {
    background-color: #000;
}

.user1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_img {
    width: 200px;
    margin-top: -20px;
}

.user2 {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}

.user22 {
    margin-top: 30px;
}

.u {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 0.5;

}

.uu {
    border-right: #B3B3B3;
    border-right-style: dotted;

}

.u1 {
    color: #FFC000;
    font-size: 23px;

}

.addr {
    font-size: 15px;
    text-align: center;
    padding: 10px 0;
    margin: 10px 0;
    background-color: #201f1f;
    border-radius: 10px;
}</style>